<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- 告诉IE浏览器用最新的引擎去渲染这个页面 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="./third/css/style.css">
	<title>Third BootStrop 3 Test!!</title>
</head>
<body>
	<!-- 旋转木马 Carousel -->
	<!-- <div class="container"> -->
		<!-- data-ride="carousel" 会使得幻灯片自动切换 -->
		<div class="carousel slide" data-ride="carousel" id="slideshow">
			<ol class="carousel-indicators">
				<li data-target="#slideshow" data-slide-to="0" class="active"></li>
				<li data-target="#slideshow" data-slide-to="1"></li>	
			</ol>

			<div class="carousel-inner">
				<div class="item active">
					<img src="./third/img/1.jpg" alt="" class="">
					<div class="carousel-caption">
						<h3>BootStrap</h3>
						<p>bootstap bootstap bootstap bootstap bootstap</p>
					</div>
				</div>
				<div class="item">
					<img src="./third/img/2.jpg" alt="" class="">
					<div class="carousel-caption">
						<h3>JavaScript</h3>
						<p>javascript javascript javascript javascript javascript</p>
					</div>
				</div>
			</div>

			<a href="#slideshow" data-slide="prev" class="left carousel-control">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>

			<a href="#slideshow" data-slide="next" class="right carousel-control">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>	
	<!-- </div> -->

	<!-- 以下用JavaScript控制播放幻灯片 -->
	<div class="container">
		<!-- 默认有个data-hover属性这样会使得鼠标悬停时会停止幻灯片播放 
			 data-pause=false会使得悬停也不会停下来
			 data-wrap=false 使得不会循环播放-->
		<div class="carousel slide" id="slideshow2" data-interval="1000" data-pause="false">
			<ol class="carousel-indicators">
				<li data-target="#slideshow2" data-slide-to="0" class="active"></li>
				<li data-target="#slideshow2" data-slide-to="1"></li>	
			</ol>

			<div class="carousel-inner">
				<div class="item active">
					<img src="holder.js/2000x500/auto/text:Bootstrap" alt="" class="">
				</div>
				<div class="item">
					<img src="holder.js/2000x500/auto/text:Javascript" alt="" class="">
				</div>
			</div>

			<a href="#slideshow2" data-slide="prev" class="left carousel-control">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>

			<a href="#slideshow2" data-slide="next" class="right carousel-control">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
	
		</div>

		<div class="text-center" style="padding:20px">
			<div class="btn-group">
				<button class="btn btn-default prev-slide">
					<span class="glyphicon glyphicon-backward"></span>
				</button>
				<button class="btn btn-default play-and-stop">
					<span class="glyphicon glyphicon-play"></span>
				</button>
				<button class="btn btn-default next-slide">
					<span class="glyphicon glyphicon-forward"></span>
				</button>
			</div>
		</div>

	</div>

	<!-- Grid System -->

	<!-- 居中显示 Container -->
	<div class="container">
		<h1 class="page-header">主体</h1>
		<p> 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 </p>
	</div>

	<!-- tset 1 : 边栏设计 -->
	<div class="container">
		<div class="row">
			<div class="col-xs-8 col-md-8 col-sm-8">
				<h1 class="page-header">主体</h1>
				<p class="visible-xs alert alert-info">我们提供IOS的APP,请点击下载!</p>
				<p> test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 </p>
				<div class="row">
					<div class="col-md-4">
						<h2>区块一</h2> 
						<p>区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 区块一 </p>
					</div>
					<div class="col-md-4">
						<h2>区块二</h2> 
						<p>区块二 区块二 区块二 区块二 </p>
					</div>
					<div class="col-md-4">
						<h2>区块三</h2> 
						<p>区块三 区块三 区块三 区块三 </p>
					</div>
					<div class="clearfix"></div>
					<div class="col-md-6">
						<h2>区块四</h2> 
						<p>区块四 区块四 区块四 区块四 </p>
					</div>
					<div class="col-md-6">
						<h2>区块五</h2> 
						<p>区块五 区块五 区块五 区块五 </p>
					</div>
				</div>
				<!-- <div class="row">
					<div class="col-md-6">
						<h2>区块四</h2> 
						<p>区块四 区块四 区块四 区块四 </p>
					</div>
					<div class="col-md-6">
						<h2>区块五</h2> 
						<p>区块五 区块五 区块五 区块五 </p>
					</div>
				</div> -->
			</div>
			<div class="col-xs-4 col-md-4 col-sm-4 hidden-xs">
				<h1 class="page-header">边栏</h1>
				<p> test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 </p>
			</div>
		</div>

		<div class="row">
			<div class="col-md-9 col-md-push-3">
				<h1 class="page-header">主体</h1>
				<p> test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 </p>
			</div>
			<div class="col-md-3 col-md-pull-9">
				<h1 class="page-header">边栏</h1>
				<p> test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 </p>
			</div>
		</div>

		<!-- 导航栏 -->
		<div class="container">
			<div class="navbar navbar-default">
				<a href="#" class="navbar-brand"><strong>XueXue</strong>.net</a>
				<ul class="nav navbar-nav">
					<li class="active"><a href="">课程</a></li>
					<li><a href="">博客</a></li>
					<li><a href="">社区</a></li>
				</ul>
			</div>
		</div>

		<!-- 导航栏 inverse样式 -->
		<div class="container">
			<div class="navbar navbar-inverse">
				<a href="#" class="navbar-brand"><strong>XueXue</strong>.net</a>
				<ul class="nav navbar-nav">
					<li class="active"><a href="">课程</a></li>
					<li><a href="">博客</a></li>
					<li><a href="">社区</a></li>
				</ul>
			</div>
		</div>

		<!-- 导航栏 固定在顶部 但内容不居中-->
		<div class="container">
			<div class="navbar navbar-inverse navbar-fixed-top">
			<!-- <div class="navbar navbar-inverse navbar-static-top"> 这一行会使得导航栏跟着页面滚动 -->
				<div class="navbar-header">
					<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						
					</button>
					<a href="#" class="navbar-brand"><strong>XueXue</strong>.net</a>
				</div>
				<div class="collapse navbar-collapse" id="responsive-navbar">
					<ul class="nav navbar-nav">
						<li class="active"><a href="">课程</a></li>
						<li><a href="">博客</a></li>
						<li><a href="">社区</a></li>
					</ul>
					<form action="" class="navbar-form navbar-left">
						<input type="text" placeholder="搜索" class="form-control">
						<button type="submit">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</form>
				</div>
			</div>
		</div>

		<!-- 导航栏 固定在底部 内容居中-->
		
		<div class="navbar navbar-inverse navbar-fixed-bottom">
			<div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar2">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#" class="navbar-brand"><strong>XueXue</strong>.net</a>
				</div>
				<div class="collapse navbar-collapse" id="responsive-navbar2">
					<ul class="nav navbar-nav">
						<li class="active"><a href="">课程</a></li>
						<li><a href="">博客</a></li>
						<li><a href="">社区</a></li>
					</ul>
					<a href="" class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">订阅课程</a>
					<div class="profile navbar-right">
						<ul class="nav navbar-nav">
							<!-- data-toggle表示可以切换视图
								 data-modal 表示切换的对象 -->
							<li><a href="" data-toggle="modal" data-target="#login-modal">登录</a></li>
							<li><a href="">注册</a></li>
						</ul>
						<!-- <p class="navbar-text">您好, <a href="" >启发</a> -->
						<p class="navbar-text">您好, <a href="#" class="navbar-link">启发</a></p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container">
			<p class="alert alert-info">
				ha ha ha ha ha ha ha ha ha ha ha ha ha ha
			</p>
		</div>

		<!-- modal -->
		<!-- <div class="modal in" style="display:block"> -->
			<!-- <div class="modal-dialog"> -->
			<!-- <div class="modal-dialog modal-lg"> 会显示大的对话框-->
			<!-- <div class="modal-dialog modal-sm"> 会显示小的对话框-->
				<!-- <div class="modal-content">
					<div class="modal-header">
						<button class="close">&times;</button>
						<h4>用户登录</h4>
					</div>
					<div class="modal-body">
						<p>用户登录表单</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary">登录</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal-backdrop in"></div> -->
		<!-- 这里的modal支持点击上面的登录按钮时, 弹出来对话框
			 tabindex表示当这个modal显示的时候按下tab键,焦点就从modal上开始,这样按键盘上的ESC键也可以关掉这个modal
			 为以下第一个div中添加属性 data-backdrop="false"可以把默认黑色背景关闭(当弹出modal时) -->
		<div class="modal fade" id="login-modal" tabindex="-1" data-remote="login">
			<div class="modal-dialog">
			<!-- <div class="modal-dialog modal-lg"> 会显示大的对话框-->
			<!-- <div class="modal-dialog modal-sm"> 会显示小的对话框-->
				<div class="modal-content">
					<!-- <div class="modal-header"> -->
						<!-- data-dismiss用来关闭该modal -->
						<!-- <button class="close" data-dismiss="modal">&times;</button>
						<h4>用户登录</h4>
					</div>
					<div class="modal-body">
						<p>用户登录表单</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary">登录</button>
					</div> -->
				</div>
			</div>
		</div>

		
	</div>
	<script src="./lib/js/jquery-2.1.4.min.js"></script>	
	<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
	<script src="//cdn.bootcss.com/holder/2.4.1/holder.js"></script>
	<script src="./third/js/app.js"></script>
	<script>
		
		// $(function(){
		// 	$('#login-modal').modal({
		// 		show: false, // 默认是隐藏
		// 		backdrop: true,//关闭登录modal的默认黑色背景
		// 		//keyboard: false,//关闭用ESC键关闭modal的功能
		// 		remote: 'login', // 远程GET请求
		// 		//另外还有两种方法来达到同样请求远程页面
		// 		// 1. 在登录按钮对应的链接上的href属性中加上对应的链接如下
		// 		// <li><a href="login" data-toggle="modal" data-target="#login-modal">登录</a></li>
		// 		// 2. 在modal中加入属性 data-remote="login"
		// 	});
		// });
		
		// 监听事件
		$(function(){
			$("#login-modal").on("show.bs.modal", function(){
				console.log("显示对话框");
			});
			$("#login-modal").on("shown.bs.modal", function(){
				console.log("对话框已经显示了");
			});
			$("#login-modal").on("hide.bs.modal", function(){
				console.log("隐藏对话框");
			});
			$("#login-modal").on("hidden.bs.modal", function(){
				console.log("隐藏了对话框");
			});
			// remote加载完毕后触发
			$("#login-modal").on("loaded.bs.modal", function(){
				console.log("已经加载好了对话框里面的内容");
			});

			$('#slideshow2').on('slide.bs.carousel', function(){
				console.log('播放幻灯片');
			});
			$('#slideshow2').on('slid.bs.carousel', function(){
				console.log('播放完成!');
			});
		});
	</script>
</body>
</html>